<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram of Collision</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      background-color: white;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="400"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define main coordinates and dimensions
    const rodY = 100;
    const rodStartX = 100;
    const rodEndX = 400;

    const ballX = 400;
    const ballY = 280;

    // Vector is drawn separately from the ball P to match the image
    const vectorTailY = 270;
    const vectorTipY = 220;
    
    // --- 1. Draw Rod AB ---
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.moveTo(rodStartX, rodY);
    ctx.lineTo(rodEndX, rodY);
    ctx.stroke();

    // --- 2. Draw Labels (A, B, P) ---
    ctx.fillStyle = 'black';
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Label 'A'
    ctx.fillText('A', rodStartX - 20, rodY);
    
    // Label 'B'
    ctx.fillText('B', rodEndX + 20, rodY);
    
    // Label 'P'
    ctx.fillText('P', ballX + 25, ballY);

    // --- 3. Draw Ball P ---
    ctx.beginPath();
    ctx.arc(ballX, ballY, 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // --- 4. Draw Dashed Path Line from B ---
    // This line indicates the direction of motion is towards B.
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.setLineDash([6, 4]); // Creates a dashed line effect
    ctx.moveTo(ballX, rodY); // Start at B's x-coordinate, on the rod's line
    ctx.lineTo(ballX, vectorTipY); // End at the arrowhead
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid lines for subsequent drawings

    // --- 5. Draw Velocity Vector ---
    // Vector Shaft
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.moveTo(ballX, vectorTailY);
    ctx.lineTo(ballX, vectorTipY);
    ctx.stroke();

    // Vector Arrowhead (a filled triangle)
    const headHeight = 15;
    const headWidth = 6;
    ctx.beginPath();
    ctx.moveTo(ballX, vectorTipY); // Tip of the arrow
    ctx.lineTo(ballX - headWidth, vectorTipY + headHeight);
    ctx.lineTo(ballX + headWidth, vectorTipY + headHeight);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();

  </script>
</body>
</html>